<template>
	<el-row class="board-page-wrapper">
		<section class="query-container">
			<div class="post-wrapper">
				<span class="query-label">所属单位：</span>
				<span>信息中心</span>
			</div>
			<div class="salary-wrapper">
				<!-- <span class="query-label">工资月</span>
				<el-select v-model="query.ofDate" size="small">
					<el-option label="202011" value="202011"></el-option>
					<el-option label="2022" value="2022"></el-option>
				</el-select> -->
				
				  <el-date-picker
				      v-model="query.ofDate1"
					  value-format='yyyyMM'
				      type="month"
				      placeholder="选择月">
				    </el-date-picker>
			</div>
			<div>
				<el-button size="small" @click='btn()'>搜索</el-button>
			</div>
		</section>
		<section class="board-table-wrapper">
			<!-- <el-table :data="tableData" border style="width: 100%">
				<el-table-column  label="序号" align="center" type='index'> </el-table-column>
				<el-table-column prop="工资月" label="工资月" width="85" align="center"> </el-table-column>
				<el-table-column prop="Wage_BranName" label="部门名称" align="center"> </el-table-column>
				<el-table-column prop="yhk_WorkerName" label="姓名" align="center"> </el-table-column>
				<el-table-column prop="Worker_ID_Card" label="身份证" align="center"> </el-table-column>
				<el-table-column prop="薪级工资" label="薪级工资" align="center"> </el-table-column>
				<el-table-column prop="岗位工资" label="岗位工资" align="center"> </el-table-column>
				<el-table-column prop="在岗津贴分" label="在职津贴分" align="center"> </el-table-column>
				<el-table-column prop="业绩津贴分" label="业绩津贴分" align="center"> </el-table-column>
				<el-table-column prop="学位津贴" label="学位津贴" align="center"> </el-table-column>
				<el-table-column prop="教研主任津贴" label="教研主任津贴" align="center"> </el-table-column>
				<el-table-column prop="工会会员" label="工会会员" align="center"> </el-table-column>
				<el-table-column prop="工龄工资" label="工龄工资" align="center"> </el-table-column>

				<el-table-column prop="课时工资" label="课时工资" align="center"> </el-table-column>
				<el-table-column prop="餐补" label="餐补" align="center"> </el-table-column>
				<el-table-column prop="教导员津贴" label="教导员津贴" align="center"> </el-table-column>
				<el-table-column prop="工资补发" label="工资补发" align="center"> </el-table-column>
				<el-table-column prop="其他扣发" label="其他扣发" align="center"> </el-table-column>
				<el-table-column prop="养老保险" label="养老保险" align="center"> </el-table-column>
				<el-table-column prop="医疗保险" label="医疗保险" align="center"> </el-table-column>
				<el-table-column prop="失业保险" label="失业保险" align="center"> </el-table-column>
				<el-table-column prop="工伤保险" label="工伤保险" align="center"> </el-table-column>
			</el-table> -->
			<!-- <el-table :data='arr' border style="width: 100%" stripe>
				<el-table-column 
				v-for="(item,index) in arr"
				              :key="index"
				              :prop="item.title"
				              :label="item.title"
				> 
		
				</el-table-column>
				
			</el-table> -->
			<el-table
			    :data="data"     
			      border
			      stripe
			>
			      <el-table-column
			          v-for="info in arr" :key="info.key"     
			          :property="info.title"
			          :label="info.title"
			         >
			             <template slot-scope="scope">
			                   {{scope.row[scope.column.property]}} 
			              </template>
			          </el-table-column>
			         
			</el-table>
		</section>
	</el-row>
</template>

<script>
	import {
		humanResources
	} from '@/api/public/index.js'
	export default {
		data() {
			return {
				query: {
					ofDate1: '202011',
					// ofDate: '202010'
				},
				tableData: [],
				tab:{},
				tabarr:[],
				arr:[],
				data:[],
				
			}
		},
		components: {},
		mounted() {
			//this.btn()
		},
		methods: {
			btn() {
				if (this.query.ofDate1 == '') {
					this.$message({
						showClose: true,
						message: '请选择日期'
					});
					return false
				}
				this.data=[]
				humanResources(this.query).then(res => {
					if (res.code == 200) {
						this.$message({
							showClose: true,
							message: res.msg,
							type: 'success'
						});
						this.tab=res.data
						this.data.push(this.tab.wageDetail)
						let obj={}
						this.arr=[]
						this.tab.columnName.unshift('序号')
						
						this.tab.columnName.forEach((a,b)=>{
							// this.tab.wageDetail.序号=b;
							obj={
								title:a,
								name:this.tab.wageDetail[a]==undefined?'':this.tab.wageDetail[a],
								key:b,
							}
							this.arr.push(obj)
						})
						
					} else {
						this.$message({
							showClose: true,
							message: res.msg
						});
						
					}
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.board-page-wrapper {
		padding: 10px;

		.query-container {
			padding: 10px 30px;
			display: flex;
			margin-left: -15px;
			margin-right: -15px;

			&>div {
				line-height: 32px;
				padding: 0 15px;
			}

			.query-label {
				margin-right: 5px;
			}
		}
	}
</style>
